<template>
	<div class="goods-detail">
		<section class="layout pl60rem pr60rem goods-detail border-b">
			<span class="fs32rem c666" :class="view == 0 ? 'select-color':''" @click="showView(0)">商品详情</span>	
			<span class="fs32rem c666" :class="view == 1 ? 'select-color':''" @click="showView(1)">产品参数</span>	
			<span class="fs32rem c666" :class="view == 2 ? 'select-color':''" @click="showView(2)">在售规则</span>	
		</section>
		<section v-if="data" v-html="data.description" v-show=" view == 0 ">
			
		</section>
		<section v-if="data" v-show=" view == 1 " class="parameter">
			<ul class="parameter-title mt30rem layout-around">
				<li class="align-center bold c333 fs32rem" v-if="data" v-for="item in data.spec_list">
					{{ item.spec_name }}
					<ul>
						<li class="align-center c38 fs26rem" v-if="data" v-for="items in item.value">{{ items.spec_value_name }}</li>
					</ul>
				</li>
			</ul>
		</section>
		<section v-html="data.rules.content" v-if="data" v-show=" view == 2 ">
			
		</section>
	</div>
</template>

<script>
	import { getXPDetail } from '@/api/goods-detail';
	export default{
		data()
		{
			return{
				goods_id : this.$route.params.id,
				view     : 0, 
				data     : null
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{

			showView(Num)
			{
				this.view = Num;
			},
			loadData()
			{
				getXPDetail(this.goods_id).then( res => {
					this.data = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.goods-detail{
		height: 90/28rem;
		line-height: 90/28rem;
		.select-color{
			font-weight: 600;
			color: #333;
			position: relative;
		}
		.select-color:after{
			content: "";
			display: block;
			background-color: #ff0036;
			height: 6/28rem;
			width: 100%;
			position: absolute;
			bottom: -0;
			left: 0;
		}
	}
</style>